import React, { useState } from 'react'
import style from './itemCard.module.scss'
import { EditOutlined } from '@ant-design/icons'
import { DatePicker, Input, Radio } from 'antd'
import dayjs from 'dayjs'
import { SEX } from '../../../starter/constants'



type TItemCard = {
  label: string
  value: any
  onChange: (item: any) => void
  type: 'text' | 'textArea' | 'date' | 'sex'
}
export default function ItemCard({label, value, type, onChange}: TItemCard) {
  const [isEdit, setIsEdit] = useState<boolean>(false)
  return (
    <div className={style.wrapper}>
      <div className={style.label}>{label}</div>
      {!isEdit &&
        <div className={style.text}>{value}</div>
      }
      {
        isEdit && type === 'text' &&
        <Input
          className={style.input}
          name='code'
          placeholder={label}
          value={value}
          onChange={onChange}
        />
      }
      { isEdit && type === 'date' &&
        <DatePicker
          style={{margin: '0.5rem 0'}}
          name='from'
          value={dayjs(value)}
          onChange={(date, dateString) => { onChange(date) }}
        />
      }
      { isEdit && type === 'sex' &&
        <Radio.Group style={{height: '3rem'}} name='sex' value={value === SEX.male ? 'male' : 'female' } onChange={onChange}>
          <Radio.Button style={{}} value="male">Муж</Radio.Button>
          <Radio.Button style={{}} value="female">Жен</Radio.Button>
        </Radio.Group>
      }

      <EditOutlined style={{cursor: 'pointer'}} onClick={() => setIsEdit(!isEdit)}/>
    </div>
  )
}
